<template>
  <el-dialog v-model="visible" title="选择驳回目标" width="600px">
    <div class="reject-target-dialog">
      <div class="search-box">
        <el-input 
          v-model="nodeSearch" 
          placeholder="搜索节点"
          clearable
          @input="filterNodes"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      
      <el-table 
        :data="filteredNodes" 
        height="400"
        @row-click="onNodeClick"
      >
        <el-table-column prop="id" label="节点ID" width="120" />
        <el-table-column prop="data.name" label="节点名称" />
        <el-table-column prop="data.type" label="节点类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getNodeTypeTag(row.data.type)">
              {{ getNodeTypeText(row.data.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button 
              size="small" 
              type="primary"
              @click="selectNode(row)"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div v-if="selectedTarget" class="selected-target">
        <h4>已选择的目标节点:</h4>
        <el-card class="target-card">
          <div class="target-info">
            <div class="target-name">{{ selectedTarget.data?.name || selectedTarget.id }}</div>
            <div class="target-type">
              <el-tag :type="getNodeTypeTag(selectedTarget.data?.type || '')">
                {{ getNodeTypeText(selectedTarget.data?.type || '') }}
              </el-tag>
            </div>
          </div>
          <el-button 
            size="small" 
            type="danger" 
            @click="clearSelection"
          >
            清除选择
          </el-button>
        </el-card>
      </div>
    </div>
    
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button 
        type="primary" 
        @click="handleConfirm"
        :disabled="!selectedTarget"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import type { FlowElement } from '../../types/workflow'

const props = defineProps<{
  modelValue: boolean
  nodes: FlowElement[]
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'confirm': [target: FlowElement]
}>()

// 响应式数据
const nodeSearch = ref('')
const selectedTarget = ref<FlowElement | null>(null)

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const filteredNodes = computed(() => {
  const nodes = props.nodes.filter(el => !('source' in el)) // 只取节点，不取边
  if (!nodeSearch.value) return nodes
  return nodes.filter(node => 
    node.data?.name?.includes(nodeSearch.value) ||
    node.id.includes(nodeSearch.value)
  )
})

// 方法
const filterNodes = () => {
  // 搜索功能已通过计算属性实现
}

const onNodeClick = (row: FlowElement) => {
  selectedTarget.value = row
}

const selectNode = (node: FlowElement) => {
  selectedTarget.value = node
}

const clearSelection = () => {
  selectedTarget.value = null
}

const getNodeTypeTag = (type: string) => {
  const tags: Record<string, string> = {
    'start': 'success',
    'approval': 'primary',
    'joint-approval': 'warning',
    'add-approval': 'warning',
    'reject': 'danger',
    'condition': 'info',
    'end': 'danger'
  }
  return tags[type] || 'info'
}

const getNodeTypeText = (type: string) => {
  const texts: Record<string, string> = {
    'start': '开始',
    'approval': '审批',
    'joint-approval': '会签',
    'add-approval': '加签',
    'reject': '驳回',
    'condition': '条件',
    'end': '结束'
  }
  return texts[type] || type
}

const handleConfirm = () => {
  if (selectedTarget.value) {
    emit('confirm', selectedTarget.value)
    visible.value = false
  }
}

const handleCancel = () => {
  visible.value = false
}

// 监听对话框打开，重置选择
watch(visible, (newVal) => {
  if (newVal) {
    selectedTarget.value = null
    nodeSearch.value = ''
  }
})

defineOptions({
  name: 'RejectTargetDialog'
})
</script>

<style scoped>
.reject-target-dialog {
  max-height: 600px;
  overflow: hidden;
}

.search-box {
  margin-bottom: 16px;
}

.selected-target {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e8e8e8;
}

.selected-target h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #606266;
}

.target-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.target-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.target-name {
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}

.target-type {
  margin-left: 12px;
}
</style> 